import { Button, message, Modal, Space, Upload } from 'ant-design-vue'
import { defineComponent, onMounted, PropType, ref } from 'vue'
import * as xlsx from 'xlsx'

import { type ProTableProps, type ProTableRef, ProTable } from '@/components'
import { useDialog } from '@/hooks'
import { readFile } from '@/utils'

export default defineComponent({
  name: 'ProductList',
  props: {
    brandId: {
      type: Number,
      required: true
    }
  },
  emits: ['dataCallback'],
  setup(props, { emit }) {
    const { showConfirm } = useDialog()
    const productList = ref([] as any[])
    const tableRef = ref({} as ProTableRef)
    const tableConfig = ref({
      fixedHeight: 400,
      options: {
        border: true,
        align: 'center',
        columns: [
          {
            title: '商品id',
            field: 'productId',
            width: 150
          },
          {
            title: '商品名称',
            field: 'productName',
            width: 200
          },
          {
            title: '操作',
            slots: {
              default: 'operation'
            },
            width: 100
          }
        ]
      }
    } as ProTableProps)

    /** 上传 */
    async function handleUploadData(file) {
      console.log(props.brandId)
      if (!props.brandId) {
        message.warning('请先选择供应商')
        return
      }
      const fileData = await readFile(file.file)
      const listData = xlsx.read(fileData, { type: 'binary' })
      const reader = xlsx.utils.sheet_to_json(
        listData.Sheets[listData.SheetNames[0]]
      ) as any[]
      productList.value = reader.map(val => {
        return { productId: val['商品id'], productName: val['商品名称'] }
      })
      handleCallback()
    }

    function handleDeleteUser(row) {
      showConfirm({
        content: '确认删除该商品？',
        onOk: () => {
          productList.value = productList.value.filter(val => {
            return val.productId != row.productId
          })
          handleCallback()
        }
      })
    }

    function handleCallback() {
      emit('dataCallback', productList.value)
    }

    function handleClearData() {
      productList.value = []
    }

    function handleRefresh(data) {
      productList.value = data
    }

    return {
      productList,
      tableRef,
      tableConfig,
      handleUploadData,
      handleDeleteUser,
      handleClearData,
      handleRefresh
    }
  },
  render() {
    return (
      <div>
        <Upload
          accept=".xlsx,.xls"
          name="file"
          customRequest={this.handleUploadData}
          showUploadList={false}
        >
          <Button type="primary">导入商品ID</Button>
        </Upload>
        <ProTable
          ref="tableRef"
          data={this.productList}
          v-show={this.productList.length > 0}
          style={{ width: '450px', marginTop: '10px' }}
          v-slots={{
            operation: ({ row }) => (
              <Space>
                <Button
                  type="link"
                  size="small"
                  onClick={() => this.handleDeleteUser(row)}
                >
                  删除
                </Button>
              </Space>
            )
          }}
          {...this.tableConfig}
        />
      </div>
    )
  }
})
